<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        .bigbox{
            width: 1500px;
            height: 1500px;
            background: papayawhip;
            margin: 0px;
        }
        .logo{
            width: 300px;
            height: 80px;
            position: absolute;
            left: 180px;
        }

        .webname{
            width: 380px;
            height: 80px;
            color: cornflowerblue;
            position: absolute;
            left: 470px;
            text-align: center;
        }
        .login{
            width: 80px;
            height: 40px;
            color: black;
            text-align: center;
            position: absolute;
            left: 1305px;
            top: 30px;
        }
        .titlebox{
            height: 60px;
            width: 1200px;
            background:lightyellow;
            position: absolute;
            top:100px;
            left: 185px;
        }
        .content{
            list-style-type: none;
            width: 1200px;
            height: 60px;
        }
        .content>li{
            float: left;
            text-align: center;
            margin-left: 7%;
        }
        .main{
            height: 1200px;
            width: 1200px;
            background: aquamarine;
        }
        .weblog{
            width: 400px;
            height: 600px;
            background: burlywood;
            position: relative;
            left: 800px;
        }
        .buloge{
            width: 200px;
            height: 80px;
            position: relative;
            top: 50px;
            left: 100px;
            font-size:150%;
            font-family: 仿宋;
            color: cornflowerblue;
        }
        .info{
            width: 770px;
            height: 600px;
            background: goldenrod;
            position: relative;
            bottom:654px;
        }
        .modeltext{
            width: 200px;
            height: 80px;
            position: relative;
            left: 335px;
            top: 50px;
            font-family:仿宋;
            font-size: 200%;
            color: lightpink;
        }
        .lastimg{
            width: 1200px;
            height: 500px;
            background: lightpink;
            position: relative;
            top: 480px;
        }
        .imglast{
            width: 1200px;
            height: 500px;
        }
        a{text-decoration: none}
        a:hover{
            color: orangered;
        }

    </style>
</head>
<body>
    <div class="bigbox">
        <img src="../img/4.jpg" class="logo">
        <h1 class="webname">Welcome to 二进制</h1>
        <button class="login"><h4"><a href="./login.html">登录/注册</a></h4></button>
        <div class="titlebox">
            <ul class="content">
                <li><a href="https://www.runoob.com/w3cnote/summary-of-network.html">计算机网络</a></li>
                <li><a href="https://man.linuxde.net/">Linux</a></li>
                <li><a href="https://www.runoob.com/mysql/mysql-tutorial.html">数据库</a></li>
                <li><a href="https://redis.io/">Redis</a></li>
                <li><a href="https://www.python.org/">Python</a></li>
                <li><a href="https://www.icourse163.org/course/UESTC-1001543002">计算机组成与原理</a></li>
                <li><a href="http://www.git-scm.com/">Git使用</a></li>
            </ul>
            <div class="main">
                <div class="weblog">
                    <h5 class="buloge">网站建设进度日志</h5>
                    <hr color="yellow">
                </div>
                <div class="info">
                    <h5 class="modeltext">技术之地</h5>
                    <hr>
                <div class="lastimg">
                    <img src="../img/3.jpg" class="imglast">
                </div>
                </div>

            </div>
        </div>
    </div>

    <script>

    </script>
</body>
</html>